<template>
  <div
    v-loading="isLoading"
    class="home-container"
    ref="container"
    @wheel="handleWsheel"
  >
    <ul class="carousel-container" :style="{ marginTop: marginTop }">
      <li v-for="item in data" :key="item.id">
        <CarouselItem :carous="item" />
      </li>
    </ul>

    <div v-show="index >= 1" @click="arrow(index - 1)" class="icon icon-up">
      <Icon type="arrowUp" />
    </div>
    <div
      v-show="index < data.length - 1"
      @click="arrow(index + 1)"
      class="icon icon-down"
    >
      <Icon type="arrowDown" />
    </div>

    <ul class="dots">
      <li
        class="dot"
        :class="{ active: index === i }"
        @click="arrow(i)"
        v-for="(item, i) in data"
        :key="item.id"
      ></li>
    </ul>
    <!-- <Loading v-if="isLoading" /> -->
  </div>
</template>


<script>
import Icon from "@/components/Icon/index.vue";
// import showMessage from "../../utils/showMessage.js";
import CarouselItem from "./CarouselItem.vue";
import { getBanners } from "@/api/banner.js";
// import Loading from "@/components/Loading/index.vue";
import fetchData from "../../mixin/fetchData.js";

export default {
  mixins: [fetchData([])],
  components: {
    CarouselItem,
    Icon,
    // Loading,
  },
  data() {
    return {
      //   banners: [],// 使用组件混入数据
      index: 0, //当前的索引
      container: 0, //父级容器高度
      turning: false, //滚轮滚动
      //   isLoading: true, //加载圈圈显示
    };
  },
  //   async created() {
  //     this.banners = await getBanners();
  //     this.isLoading = false; //数据请求完成后消失
  //   },
  mounted() {
    this.container = this.$refs.container.clientHeight;
    window.addEventListener("resize", this.handleResize); //窗口尺寸发生变化触发
  },

  destroyed() {
    window.removeEventListener("resize", this.handleResize); //使用完移除
  },
  computed: {
    marginTop() {
      return -this.index * this.container + "px";
    },
  },
  methods: {
    arrow(value) {
      //点击上下箭头翻页
      this.index = value;
    },
    handleWsheel(e) {
      // 鼠标滚轮滚动事件
      if (e.deltaY < 0 && this.index > 0) {
        this.index--;
      } else if (e.deltaY > 0 && this.index < this.data.length - 1) {
        this.index++;
      }
    },
    handleResize() {
      this.container = this.$refs.container.clientHeight;
    },
    async fetchData() {
      //组件混入获取数据
      return await getBanners();
    },
  },
};
</script>


<style lang="less" scoped>
@import "~@/styles/var.less";
@import "~@/styles/mixin.less";
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}
.home-container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden; // ********margin-top合并问题

  .carousel-container {
    width: 100%;
    height: 100%;
    li {
      width: 100%;
      height: 100%;
    }
  }
  .icon {
    font-size: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    &.icon-up {
      top: 25px;
      bottom: auto;
      transform: translateX(-50%);
      animation: jumpUp 1.5s linear infinite;
    }
    &.icon-down {
      bottom: 25px;
      top: auto;
      transform: translateX(-50%);
      animation: jumpDown 1.5s linear infinite;
    }

    @keyframes jumpUp {
      0% {
        transform: translate(-50%, -15px);
      }
      50% {
        transform: translate(-50%, 15px);
      }
      100% {
        transform: translate(-50%, -15px);
      }
    }
    @keyframes jumpDown {
      0% {
        transform: translate(-50%, 15px);
      }
      50% {
        transform: translate(-50%, -15px);
      }
      100% {
        transform: translate(-50%, 15px);
      }
    }
  }
  .dots {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
    .dot {
      width: 7px;
      height: 7px;
      border: 2px solid #fff;
      background: @dark;
      margin-bottom: 7px;
      border-radius: 50%;
      cursor: pointer;
      &.active {
        background-color: #fff;
      }
    }
  }
}
</style>

